<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/pagination.css">
    <script src="../script/list_module.js" type="module"></script>
</head>

<body>
    <!-- 版心 -->
    <div class="wrapper">
        <!-- 列表标题 -->
        <div class="h-img">
            <img src="../img/icon_map_208.png" alt="">
            <h1>烹饪厨具</h1>
        </div>
        <!-- 两个按钮 -->
        <div class="p2">
            <p class="p_btn">
                <span>价格排序：</span>
                <button>默认</button>
                <button>升序</button>
                <a href="javascript:;">今日推荐</a>
                <a href="javascript:;">销量</a>
                <a href="javascript:;">上架时间</a>
                <a href="javascript:;">特惠</a>
            </p>
            <p class="p_ckb">
                <!-- <input type="checkbox"><span>惠买自营</span> -->
                <input type="checkbox" class="ckb"><span>入驻商家</span>
            </p>
        </div>
        <!-- 列表页的结构 -->
        <div class="list">
            <ul>
                <!-- 渲染区域 -->
            </ul>
        </div>
        <!-- 加载分页的结构 ：page-->
        <!-- 样式在pagination.css -->
        <div class="pagelist">
            <div class="m-style page">
            </div>
        </div>
    </div>
</body>

</html>

<!-- 
    列表的三大功能
    1.渲染 √
        - 需要商品的数据 - 后端接口地址 
        http://10.31.165.37/JS2012/projectname/php/list.php
        - 利用ajax获取数据进行渲染。
        - 将列表页面的sid传给详情页 - 地址栏传输
    2.排序
    3.分页
 -->